<template>
  <view class="container">
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <view class="selected-city" @click="goToCityPicker">
        {{ selectedCity }} <text class="arrow">▼</text>
      </view>
      <input class="search-input" placeholder="请输入搜索内容" @confirm="handleSearch" />
    </view>

    <!-- 筛选功能模块 -->
    <view class="filter-bar">
      <!-- 左侧：搜职位、搜公司 -->
      <view class="filter-left">
        <view
          class="filter-item"
          :class="{ active: currentFilter === 'position' }"
          @click="toggleFilter('position')"
        >
          <text>搜职位</text>
        </view>
        <view
          class="filter-item"
          :class="{ active: currentFilter === 'company' }"
          @click="toggleFilter('company')"
        >
          <text>搜公司</text>
        </view>
      </view>

      <!-- 右侧：区域位置、筛选 -->
      <view class="filter-right">
        <view class="filter-item" @click="goToLocationPage">
          <text>区域位置</text>
        </view>
        <view class="filter-item" @click="goToFilterPage">
          <text>筛选</text>
        </view>
      </view>
    </view>

    <!-- 求职信息卡片 -->
	<view v-if="currentFilter === 'position'">
    <view class="job-card" v-for="(job, index) in filteredJobList" :key="index">
	<view class="job-top">
	  <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf1b8b89f9.png"></image>
      <view class="job-header">
        <text class="job-title">{{ job.name }} {{ job.position }}</text>
        <text class="job-info">{{ job.experience }} {{ job.education }} {{ job.salary }} {{ job.age }}</text>
      </view>
	  </view>
      <view class="job-details">
        <text class="job-company">{{ job.company }} · {{ job.role }}</text>
        <text class="job-date">{{ job.date }}</text>
      </view>
      <text class="job-expectation">求职期望：{{ job.expectation }}</text>
      <view class="job-responsibilities">
        <text v-for="(resp, i) in job.responsibilities" :key="i" class="responsibility-item">
          {{ resp }}
        </text>
      </view>
    </view>
	</view>
	
	 <!-- 公司招聘信息卡片 -->
	    <view v-if="currentFilter === 'company'">
	      <view class="company-card" v-for="(company, index) in filteredCompanyList" :key="index">
	        <view class="company-header">
				<text class="job-title">{{ company.title }}</text>
				<text class="job-salary">{{ company.salary }}</text>
				<text class="company-info">{{ company.location }} {{ company.education }} {{ company.experience }} {{ company.benefits }} {{ company.weekends }} {{ company.festivals }}</text>
	        </view>
	        <view class="company-jobs">
				<text class="company-name">{{ company.name }}</text>
	            <text class="job-date">{{ company.date }}</text>
	          </view>
	        </view>
	      </view>
	    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: "佛山",
      searchQuery: "",
      // 求职信息列表
      jobList: [
        {
          name: "填姓名",
          position: "Java工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          company: "佛山某某某有些公司",
          role: "工程师",
          date: "2020.01-2024-11",
          expectation: "java",
          responsibilities: ["1.负责什么工作内容", "2.负责什么工作内容", "3.负责什么工作内容"],
        },
        {
          name: "填姓名",
          position: "前端工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          company: "佛山某某某有些公司",
          role: "工程师",
          date: "2020.01-2024-11",
          expectation: "前端开发",
          responsibilities: ["1.负责什么工作内容", "2.负责什么工作内容", "3.负责什么工作内容"],
        },
        {
          name: "填姓名",
          position: "Java工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          company: "佛山某某某有些公司",
          role: "工程师",
          date: "2020.01-2024-11",
          expectation: "java",
          responsibilities: ["负责什么工作内容", "负责什么工作内容", "负责什么工作内容"],
        },
      ],
   // 公司信息列表
        companyList: [
          {
            name: "广东某某网络科技有限公司",
            location: "禅城",
            industry: "互联网",
            date: "2024-11-25",
			title: "销售代表",
			salary: "5000-9000元/月",
			education: "学历不限",
			experience: "1-3年",
			benefits: "商业保险",
			weekends: "双休",
			festivals:"节日放假"
		  },
          {
            name: "佛山某某某有些公司",
            location: "南海",
            date: "2024-11-25",
			title: "产品经理",
			salary: "10000-15000元/月",
			education: "硕士",
			experience: "5-10年",
			benefits: "商业保险、年终奖",
			weekends: "双休",
			festivals:"节日放假"
		  },
        ],
      // 当前筛选类型
      currentFilter: "position", // 默认显示职位
      // 过滤后的求职信息列表
      filteredJobList: [],
   // 过滤后的公司信息列表
		filteredCompanyList: [],
      // 区域位置筛选条件
      locationFilter: "",
      // 综合筛选条件
      advancedFilter: {},
    };
  },
  methods: {
    // 跳转到城市选择页面
    goToCityPicker() {
      uni.navigateTo({
        url: "/pages/enterprise/cityPicker",
      });
    },
    // 处理搜索
    handleSearch(e) {
      this.searchQuery = e.detail.value;
      this.filterJobs();
    },
    // 切换筛选类型（职位/公司）
    toggleFilter(type) {
      this.currentFilter = type;
      this.filterJobs();
    },
    // 跳转到区域位置页面
    goToLocationPage() {
      uni.navigateTo({
        url: "/pages/enterprise/location",
      });
    },
    // 跳转到筛选页面
    goToFilterPage() {
      uni.navigateTo({
        url: "/pages/enterprise/filter",
      });
    },
   // 过滤职位和公司信息
       filterJobs() {
         if (this.currentFilter === "position") {
           // 过滤职位信息
           this.filteredJobList = this.jobList.filter((job) =>
             Object.values(job).some((value) =>
               String(value).includes(this.searchQuery)
          ) );
         } else if (this.currentFilter === "company") {
           // 过滤公司信息
           this.filteredCompanyList = this.companyList.filter((company) =>
             Object.values(company).some((value) =>
               String(value).includes(this.searchQuery)
          ) );
         }
       },
     },
  onShow() {
    // 从区域位置或筛选页面返回时，获取筛选条件并更新数据
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage.$page && currentPage.$page.options) {
      const { location, filter } = currentPage.$page.options;
      if (location) {
        this.locationFilter = location;
      }
      if (filter) {
        this.advancedFilter = JSON.parse(filter);
      }
      this.filterJobs();
    }
  },
  mounted() {
    // 初始化时显示全部求职信息
    this.filteredJobList = this.jobList;
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #fff;
}

/* 搜索框样式 */
.search-box {
  width: 355px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #f6f7f8;
  border-radius: 32px;
  padding: 10px;
  margin-bottom: 20px;
}

.selected-city {
  margin-right: 10px;
  cursor: pointer;
}

.arrow {
	width: 6px;
height: 4px;
  font-size: 8px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  border: none;
  outline: none;
}

/* 筛选栏样式 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-left,
.filter-right {
  display: flex;
  align-items: center;
}

.filter-left .filter-item {
  margin-right: 10px;
  font-size: 14px;
}

.filter-right .filter-item {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px;
}

.filter-item:last-child {
  margin-right: 0;
}

/* 求职信息卡片样式 */
.job-card,
.company-card{
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.job-top{
	display: flex;
}

.job-top image{
	width: 50px;
	height: 50px;
	margin-right: 20px;
}

.job-header,
.company-header{
  margin-bottom: 10px;
}

.job-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.job-info,
.company-info{
  font-size: 14px;
  color: #555;
  display: block;
}

.job-details {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-company {
  font-size: 14px;
  color: #333;
}

.job-date {
  font-size: 12px;
  color: #777;
}

.job-expectation {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.responsibility-item {
  font-size: 10px;
  color: #555;
  margin-bottom: 5px;
}

.company-jobs{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 筛选弹窗样式 */
.filter-popup {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 20px;
}

.popup-content {
  margin-bottom: 20px;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
}

.popup-button {
  flex: 1;
  margin-right: 10px;
}

.popup-button.confirm {
  background-color: #007bff;
  color: #fff;
}
</style>